<template>
  <view class="page-wrap bottom10" v-if="flows && flows.length>0">

    <view class="lineBottom10 page-section">
      <uni-section :title="title" type="line"/>
    </view>
    <view style="height: 20rpx"></view>

    <m-steps v-for="(item, index) in flows" :item="item" :key="index" :index="index" date="updateTime">
      <view slot="status">
        <text v-if="item.nodeType !== 3 && item.nodeType !== 4">{{ item.assignee }}</text>
        <text class="left20 right20">{{ item.activityName}}</text>
        <text v-if="item.endTime">{{ item.endTime }}</text>
      </view>
      <view class="flex-col top10 record-content" slot="content">
        <view v-if="item.nodeType == 3 || item.nodeType == 4" class="text-line">
          <text class="text-name">待审核</text>
        </view>
        <template v-else>
          <view v-if="item.auditResults == '拒绝'" class="text-line">
            <text class="text-name">拒绝:</text>
            <text class="text-value">原因:{{ item.message|filterNull }}</text>
          </view>
          <view v-else class="text-line">
            <text class="text-name">{{ item.auditResults }}</text>
            <text v-if="item.message" class="text-value">原因:{{ item.message|filterNull }}</text>
          </view>
        </template>

      </view>
    </m-steps>


  </view>

</template>

<script>
import picPdf from "@/components/pic-pdf.vue";
import {FlowRecord} from "@/api/flowable/examine/details/api";
import UniSection from "@/uni_modules/uni-section/components/uni-section/uni-section.vue";
import mSteps from "@/components/m-steps.vue";

export default {
  name: "exam-flow",
  components: {mSteps, UniSection, picPdf},
  data() {
    return {
      flows: []
    };
  },
  props: {
    title:{
      type:String,
      default:'审批流程'
    },
    instanceId: {
      type: String | Number,
      default: ''
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      if (!this.instanceId) return;
      FlowRecord({
        id: this.instanceId,
      }).then((res) => {
        this.flows = res?.data?.reverse()??[];
      });
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
